<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>


    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Combobox, with CSS for Multiple Stacked Instances</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
<link rel="stylesheet" type="text/css" href="../../build/autocomplete/assets/skins/sam/autocomplete.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
<script type="text/javascript" src="../../build/element/element-min.js"></script>
<script type="text/javascript" src="../../build/button/button-min.js"></script>
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="../../build/autocomplete/autocomplete-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">
/* custom styles for inline instances */
.yui-skin-sam .yui-ac-input { position:static;width:20em; vertical-align:middle;}
.yui-skin-sam .yui-ac-container { width:20em;left:0px;}

/* needed for stacked instances for ie & sf z-index bug of absolute inside relative els */
#bAutoComplete { z-index:9001; } 
#lAutoComplete { z-index:9000; }

/* buttons */
.yui-ac .yui-button {vertical-align:middle;}
.yui-ac .yui-button button {background: url(../autocomplete/assets/img/ac-arrow-rt.png) center center no-repeat }
.yui-ac .open .yui-button button {background: url(../autocomplete/assets/img/ac-arrow-dn.png) center center no-repeat}
</style>


<!--end custom header content for this example-->

</head>

<body class="yui-skin-sam">


<h1>Combobox, with CSS for Multiple Stacked Instances</h1>

<div class="exampleIntro">
	<p>This "combo box" AutoComplete implementation allows the user to pick an item from a set list or enter a custom value directly into the input field. Please note the following custom CSS:</p>

<ul>
    <li>z-index has been applied to support multiple vertically stacked AutoComplete instances</li>
    <li>the input field and container have been styled to support a button inline to the right</li>
</ul>

<p>Implementers who are working with data from third-party sources, user input data, or otherwise untrustworthy sources should be sure to read the <a href="http://developer.yahoo.com/yui/autocomplete/#security">Security Considerations</a> section of the AutoComplete user guide.</p>
			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<label for="bInput">What would you like for breakfast?</label>
<div id="bAutoComplete">
    <input id="bInput" type="text"> <span id="toggleB"></span>
	<div id="bContainer"></div>
</div>

<label for="lInput">What would you like for lunch?</label>
<div id="lAutoComplete">
	<input id="lInput" type="text"> <span id="toggleL"></span>
	<div id="lContainer"></div>
</div>

<label for="dInput">What would you like for dinner?</label>
<div id="dAutoComplete">
	<input id="dInput" type="text"> <span id="toggleD"></span>
	<div id="dContainer"></div>
</div>

<script type="text/javascript" src="assets/js/data.js"></script>
<script type="text/javascript">
YAHOO.example.Combobox = function() {
    // Instantiate DataSources
    var bDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.menu.breakfasts);
    var lDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.menu.lunches);
    var dDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.menu.dinners);

    // Instantiate AutoCompletes
    var oConfigs = {
        prehighlightClassName: "yui-ac-prehighlight",
        useShadow: true,
        queryDelay: 0,
        minQueryLength: 0,
        animVert: .01
    }
    var bAC = new YAHOO.widget.AutoComplete("bInput", "bContainer", bDS, oConfigs);
    var lAC = new YAHOO.widget.AutoComplete("lInput", "lContainer", lDS, oConfigs);
    var dAC = new YAHOO.widget.AutoComplete("dInput", "dContainer", dDS, oConfigs);
    
    // Breakfast combobox
    var bToggler = YAHOO.util.Dom.get("toggleB");
    var oPushButtonB = new YAHOO.widget.Button({container:bToggler});
    var toggleB = function(e) {
        //YAHOO.util.Event.stopEvent(e);
        if(!YAHOO.util.Dom.hasClass(bToggler, "open")) {
            YAHOO.util.Dom.addClass(bToggler, "open")
        }
        
        // Is open
        if(bAC.isContainerOpen()) {
            bAC.collapseContainer();
        }
        // Is closed
        else {
            bAC.getInputEl().focus(); // Needed to keep widget active
            setTimeout(function() { // For IE
                bAC.sendQuery("");
            },0);
        }
    }
    oPushButtonB.on("click", toggleB);
    bAC.containerCollapseEvent.subscribe(function(){YAHOO.util.Dom.removeClass(bToggler, "open")});
    
    // Lunch combobox
    var lToggler = YAHOO.util.Dom.get("toggleL");
    var oPushButtonL = new YAHOO.widget.Button({container:lToggler});
    var toggleL = function(e) {
        //YAHOO.util.Event.stopEvent(e);
        if(!YAHOO.util.Dom.hasClass(lToggler, "open")) {
            YAHOO.util.Dom.addClass(lToggler, "open")
        }
        
        // Is open
        if(lAC.isContainerOpen()) {
            lAC.collapseContainer();
        }
        // Is closed
        else {
            lAC.getInputEl().focus(); // Needed to keep widget active
            setTimeout(function() { // For IE
                lAC.sendQuery("");
            },0);
        }
    }
    oPushButtonL.on("click", toggleL);
    lAC.containerCollapseEvent.subscribe(function(){YAHOO.util.Dom.removeClass(lToggler, "open")});

    // Dinner combobox
    var dToggler = YAHOO.util.Dom.get("toggleD");
    var oPushButtonD = new YAHOO.widget.Button({container:dToggler});
    var toggleD = function(e) {
        //YAHOO.util.Event.stopEvent(e);
        if(!YAHOO.util.Dom.hasClass(dToggler, "open")) {
            YAHOO.util.Dom.addClass(dToggler, "open")
        }
        
        // Is open
        if(dAC.isContainerOpen()) {
            dAC.collapseContainer();
        }
        // Is closed
        else {
            dAC.getInputEl().focus(); // Needed to keep widget active
            setTimeout(function() { // For IE
                dAC.sendQuery("");
            },0);
        }
    }
    oPushButtonD.on("click", toggleD);
    dAC.containerCollapseEvent.subscribe(function(){YAHOO.util.Dom.removeClass(dToggler, "open")});

    return {
        bDS: bDS,
        bAC: bAC,
        lDS: lDS,
        lAC: lAC,
        dDS: dDS,
        dAC: dAC
    };
}();
</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
